<template>
    <el-form label-position="left" label-width="auto" class="mi-drawer-info">
        <el-form-item label="昵称 :">
            <el-input :value="data.name" placeholder="暂无数据"/>
        </el-form-item>
        <el-form-item label="账号 :">
            <el-input :value="data.account" placeholder="暂无数据"/>
        </el-form-item>
        <el-form-item label="手机号 :">
            <el-input :value="data.phone" placeholder="暂无数据"/>
        </el-form-item>
        <el-form-item label="角色 :">
            <el-tag class="rit5">{{data.roleName}}</el-tag>
        </el-form-item>

        <el-divider/>
        <el-form-item label="拥有菜单">
            <el-col :span="24">
                <el-input v-model="filterMenuText"
                          style="width: 40%;margin-right: 5px"
                          @keyup.native="filterTextMenuChange()"
                          placeholder="输入标签内容进行查询"/>
                <el-tooltip content="展开" placement="top-start">
                    <el-button @click="menuOpenAll" size="mini" type="info" plain icon="el-icon-arrow-down"/>
                </el-tooltip>
                <el-tooltip content="折叠" placement="top-start">
                    <el-button @click="menuCloseAll" type="info" plain size="mini" icon="el-icon-arrow-up"/>
                </el-tooltip>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-tree
                    ref="hasMenus"
                    node-key="id"
                    :data="treeHasMenus"
                    :check-strictly="false"
                    :default-checked-keys="menuCheckIds"
                    :default-expanded-keys="menuCheckIds"
                    :filter-node-method="filterNodeMenu">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <el-tag size="small">{{data.title}}</el-tag>
                        <el-tag size="small" class="let2">{{data.path}}</el-tag>
                    </span>
            </el-tree>
        </el-form-item>

        <el-divider/>
        <el-form-item label="拥有权限">
            <el-col line :span="24">
                <el-input v-model="filterResourceText"
                          @keyup.native="filterResourceChange()"
                          style="width: 40%;margin-right: 5px"
                          placeholder="输入标签内容进行查询"/>
                <el-tooltip content="展开" placement="top-start">
                    <el-button @click="resourceOpenAll" size="mini" type="info" plain
                               icon="el-icon-arrow-down"/>
                </el-tooltip>
                <el-tooltip content="折叠" placement="top-start">
                    <el-button @click="resourceCloseAll" type="info" plain size="mini" icon="el-icon-arrow-up"/>
                </el-tooltip>
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-tree style="padding-bottom: 30px"
                     ref="hasResources"
                     node-key="id"
                     :data="treeHasResources"
                     :check-strictly="false"
                     :default-checked-keys="resourceCheckIds"
                     :default-expanded-keys="resourceCheckIds"
                     :filter-node-method="filterNodeResource">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <el-tag size="small">{{data.name}}</el-tag>
                        <el-tag size="small" class="let2">{{data.url}}</el-tag>
                     </span>
            </el-tree>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
    import {Component, Prop} from 'vue-property-decorator'
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {rule} from "@/core/utils/rule";
    import $http from "@/core/utils/http";
    import {API} from "@/core/api/API";
    import {copy, isBlank, tree} from "@/core/utils/Utils";

    @Component({
        name: 'UserInfo',
        components: {},
    })
    export default class UserInfo extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) data!: any;
        @Prop({default: {}}) option!: any;

        get treeHasMenus() {
            return tree(this.hasMenus)
        }

        get treeHasResources() {
            return tree(this.hasResources)
        }

        //初始化
        async mounted() {
            this.data = copy(this.data);
            this.roleMenu();
            this.roleResource();
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        hasMenus = [];
        menuCheckIds = [];

        hasResources = [];
        resourceCheckIds = [];

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        mRules = {
            name: [rule.notNullBlur()],
            code: [rule.notNullBlur()],
        };

        roleMenu() {
            $http.post(API.sysRoleMenu, {id: this.data.roleId}).then((res: any) => {
                if (res.success) {
                    this.hasMenus = res.hasMenus;
                    this.menuCheckIds = res.menuCheckIds;
                }
            });
        }

        roleResource() {
            $http.post(API.sysRoleResource, {id: this.data.roleId}).then((res: any) => {
                if (res.success) {
                    this.hasResources = res.hasResources;
                    this.resourceCheckIds = res.resourceCheckIds;
                }
            });
        }


        /**
         * 处理树
         */
        filterMenuText = "";
        filterResourceText = "";

        //菜单展开
        menuOpenAll() {
            for (let i = 0; i < (this.$refs.hasMenus as any).store._getAllNodes().length; i++) {
                (this.$refs.hasMenus as any).store._getAllNodes()[i].expanded = true;
            }
        }

        //菜单折叠
        menuCloseAll() {
            for (let i = 0; i < (this.$refs.hasMenus as any).store._getAllNodes().length; i++) {
                (this.$refs.hasMenus as any).store._getAllNodes()[i].expanded = false;
            }
        }

        //资源展开
        resourceOpenAll() {
            for (let i = 0; i < (this.$refs.hasResources as any).store._getAllNodes().length; i++) {
                (this.$refs.hasResources as any).store._getAllNodes()[i].expanded = true;
            }
        }

        //资源折叠
        resourceCloseAll() {
            for (let i = 0; i < (this.$refs.hasResources as any).store._getAllNodes().length; i++) {
                (this.$refs.hasResources as any).store._getAllNodes()[i].expanded = false;
            }
        }

        //文字筛选菜单
        filterTextMenuChange() {
            (this.$refs.hasMenus as any).filter(this.filterMenuText)
        }

        //文字筛选资源
        filterResourceChange() {
            (this.$refs.hasResources as any).filter(this.filterResourceText)
        }

        filterNodeMenu(value: any, data: any) {
            if (isBlank(value)) return true;
            let path = false;
            let redirect = false;
            let title = false;
            if (data.path) {
                path = data.path.indexOf(value) != -1
            }
            if (data.redirect) {
                redirect = data.redirect.indexOf(value) != -1
            }
            if (data.title) {
                title = data.title.indexOf(value) != -1
            }
            return path || redirect || title;
        }

        filterNodeResource(value: any, data: any) {
            if (isBlank(value)) return true;
            let ability = false;
            let name = false;
            let url = false;
            if (data.ability) {
                ability = data.ability.indexOf(value) != -1
            }
            if (data.name) {
                name = data.name.indexOf(value) != -1
            }
            if (data.url) {
                url = data.url.indexOf(value) != -1
            }
            return ability || name || url;
        }


    }
</script>

<style scoped type="scss">


    /*.demo-statistics-table-expand label {*/
    /*    font-size: 0;*/
    /*    width: 100px;*/
    /*    color: #99a9bf;*/
    /*}*/


    /*.block .timeline {*/
    /*    padding-left: 0px;*/
    /*    margin-top: 40px;*/
    /*}*/

    /*.demo-drawer__footer {*/
    /*    margin: 20px 20px 0 20px;*/
    /*    text-align: center;*/
    /*}*/

    /*.demo-drawer__footer button {*/
    /*    width: 100%;*/
    /*}*/
</style>
